<template>
  <div class="special">
    <van-nav-bar title="严选专栏" left-arrow @click-left="$router.back()" />
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :style="{ 'background-image': `url(${item.pic})` }"
      >
        <h6>{{ item.title }}</h6>
        <p>{{ item.descript }}</p>
        <!-- <router-link custom :to="`/specialDetail?id=${item.id}`" #="{ navigate }">
          <span @click="navigate">查看详情</span>
        </router-link> -->
         <router-link custom :to="{path:'/specialDetail',query:{id:item.id}}" #="{ navigate }">
          <span @click="navigate">查看详情</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getNewList } from "../../api/home/home";
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [], // 严选的数据
    });
    getNewList().then((res) => {
      data.list = res.data;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.special {
  height: 100%;
  ul {
    height: calc(100% - 46px);
    overflow: auto;
    padding: 0 10px;
    li {
      height: 185px;
      background-size: 100% 100%;
      margin-top: 10px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 14px;
      box-sizing: border-box;
      padding: 0 30px;
      h6 {
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      p {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
      span{
        padding: 10px 16px;
        border: 1px solid #ffff;
        border-radius: 20px;
      }
    }
  }
}
</style>